<template>
  <PageWrapper dense>
    <BasicTable @register="register">
      <template #toolbar>
        <div><a-button type="primary" @click="exportOrder">下载订单</a-button></div>
        <div>
          <input
            ref="inputRef"
            type="file"
            v-show="false"
            accept=".xlsx, .xls"
            @change="handleInputClick"
          />
          <div @click="handleUpload">
            <div><a-button type="primary">发货导入</a-button></div>
          </div>
        </div>
        <TableAction />
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './listData';
  import {
    exportExcel,
    getchinaUnionPayList,
    importExcel,
  } from '/@/api/sys/chinaUnionPayorderList';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { AxiosResponse } from 'axios';
  export default defineComponent({
    name: 'DocumentsList',
    components: { BasicTable, PageWrapper },
    emits: ['success', 'error'],
    setup(_, {}) {
      const { createMessage } = useMessage();
      const inputRef = ref<HTMLInputElement | null>(null);
      const [register, { getForm }] = useTable({
        title: '订单列表',
        api: getchinaUnionPayList,
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        striped: false,
        showIndexColumn: false,
        canResize: false,
        bordered: true,
        fetchSetting: {
          pageField: 'pageNum',
          totalField: 'totalCount',
          listField: 'list',
          sizeField: 'pageSize',
        },
      });

      function handleInputClick(e: Event) {
        const files = e && (e.target as HTMLInputElement).files;
        const rawFile = files && files[0]; // only setting files[0]
        if (!rawFile) return;
        const form = new FormData();
        form.append('file', rawFile, rawFile.name);
        importExcel(form).then((res: AxiosResponse<any>) => {
          console.log(res);
          createMessage.success(res);
        });
      }
      function exportOrder() {
        const fieldsValue = getForm().getFieldsValue();
        const hdid = fieldsValue.hdid == null ? '1' : fieldsValue.hdid;
        console.log(hdid);
        const orderId = fieldsValue.orderId == null ? '' : fieldsValue.orderId;
        console.log(fieldsValue.orderId);
        const status = fieldsValue.status == null ? '' : fieldsValue.status;
        const beginTime = fieldsValue.beginTime == null ? '' : fieldsValue.beginTime;
        const endTime = fieldsValue.endTime == null ? '' : fieldsValue.endTime;
        window.location.href =
          'https://ylqy-api.benlai.com/admin/exportExcel?hdid=' +
          hdid +
          '&orderId=' +
          orderId +
          '&status=' +
          status +
          '&beginTime=' +
          beginTime +
          '&endTime=' +
          endTime;
      }
      /**
       * @description: 点击上传按钮
       */
      function handleUpload() {
        const inputRefDom = unref(inputRef);
        inputRefDom && inputRefDom.click();
      }

      return {
        importExcel,
        register,
        getchinaUnionPayList,
        exportOrder,
        exportExcel,
        inputRef,
        handleUpload,
        handleInputClick,
      };
    },
  });
</script>
